<template>
  <Dialog v-model="dialogVisible" title="登录日志">
    <el-table v-loading="loading" :data="list">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="登录时间" align="center" prop="signinTime" width="180" />
      <el-table-column label="登录IP" align="center" prop="ip" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:page="queryParams.pageIndex"
      :limit="10"
      :total="total"
      @pagination="getList"
    />
  </Dialog>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import Pagination from '@/components/Pagination/index.vue'

defineOptions({ name: 'SignInLog' })

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<UserApi.SignInLogVO[]>([]) // 列表的数据
let userUid: string | undefined
const queryParams = reactive({
  pageIndex: 1,
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const res = await UserApi.getSignInLogList(userUid!, queryParams.pageIndex)
    list.value = res.data
    total.value = res.total
  } finally {
    loading.value = false
  }
}

/** 打开弹窗 */
const open = async (uid: string) => {
  dialogVisible.value = true
  resetForm()
  userUid = uid
  await getList()
}

/** 重置表单 */
const resetForm = () => {
  userUid = undefined
  queryParams.pageIndex = 1
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
